<template>
    <!-- <div class="stock_toast_box"> -->
    
        <div  class="stock_toast_box" v-if="compnentStockShow" @click.self="hideGuide" @touchmove.prevent @mousewheel.prevent>
    
            <div class="add_toast_box">
    
                <div class="add_top">
    
                    <span style="font-size: 16px; font-weight: 700">修改库存</span>
    
                    <span @click="hideGuide"><a-icon type="close" /></span>
    
                </div>
    
                <div class="add_content_box">

                    <div>
    
                        <div class="tan_kuangtwo">
    
                            <div class="num_box">规格({{stockSkuList.length}})</div>
    
                        </div>
    
    
    
                        <div class="tag_tag_box">
    
    
    
                            <div v-for="(item2,index2) in stockSkuList" :index="index2">
    
    
    
                                <div @click="stock_click_oneId(index2,item2)" :class="item2.tempSelect==true? 'tanactive tag_nei' : 'tanunactive tag_nei'">
    
                                    <span>{{item2.title}}</span>
    
                                    <span v-if='item2.tempSelect==true' style='position:absolute;right:0;bottom:0;right:-3px;bottom:-7px;' class="iconfont icon-jiaobiaoxuanzhong right_check"></span>
    
                                </div>
    
    
    
                            </div>
    
                        </div>
    
                    </div>
    
                    <div class="tan_kuangtwo">
    
                        <div class="num_box">数量</div>
    
                    </div>

    
                    <div class="num_stock_box">

                        <a-input-number v-if='stockUnitFlag==1' v-model="inputStockNum" :min="0" :precision="0" :formatter="limitNumber" :parser="limitNumber" style="flex:auto;margin-bottom:10px;width:100%;" placeholder="请输入数量" />
    
                        <a-input v-if='stockUnitFlag==2' v-model="inputStockNum" style="flex:auto;margin-bottom:10px;width:100%;" placeholder="请输入重量" />
    
                        <span style='color:red'>当前库存剩余{{stockNum}}{{stockUnitFlag==1?'份':'千克'}}</span>
    
    
    
    
    
                    </div>
    
    
    
    
    
                </div>
    
    
    
                <div class="add_choice_bottom">
    
                    <div class='choice_btn' @click="skuOpeFunc()">保存</div>
    
    
    
    
    
                </div>
    
            </div>
    
        </div>
    
    <!-- </div> -->
</template>
    
<script>
import {
    updateItemSkuAPI,
    SELECTGOODSBYIDAPI

} from "../api/index.js";
import { mapGetters } from "vuex";
export default {
    name: "modifyStock",
    props: {
        // componentStockSkuList: {
        //     type: Array,
        //     default: []
        // },
        compnentStockShow: {
            type: Boolean,
            default: false
        },
        currentItemId: {
            type: Number,
            default: 0
        },
        // currnetUnitFlag: {
        //     type: Number,
        //     default: 0
        // },
        // list: Array,
        // visibility:Boolean,
        // photoType: {
        //     type: Number,
        //     default: 1
        // },

    },

    data() {
        return {
            oldStock:0,
            frequentlyToastShow: false,
            toastHide: null,
            stockSkuList: [],
            stockUnitFlag: 1,
            stockCurrentItem: {},


            stockCurrentAttributeList: [],
            stockTempCurrentAttributeList: [],
            inputStockNum: '',

            stockNum: 0,
            stockShow: false,
        };
    },

    created()  {
        // this.stockSkuList = this.componentStockSkuList;
        // console.log('componentStockSkuList222-', this.componentStockSkuList,'--stockSkuList',this.stockSkuList);
        console.log('d-f--f-', this.compnentStockShow);
        // if (this.compnentStockShow == true) {

            this.shopInfoFunc();
        // }



    },
    components: {},
    computed: {
        ...mapGetters(["cbStoreId", "cbStoreInfo", "cbUserId", "cbToken","cbUserInfo","cbUserPhone"]),
    },
    methods: {
        hideGuide() {
            console.log('1111hideGuide---');
            // this.stockShow = false;
            // this.$emit('closeStock',true);
            var json = {stockNum:this.stockNum,oldStock:this.oldStock};
             this.$emit('closeStock',json); // 等于0刷新商品列表，将库存为0的商品变成真实的数据  {{stockNum}}{{stockUnitFlag==1?'份':'千克'}}
        },

        shopInfoFunc() {
            console.log('aaaaachildItemId---', this.currentItemId, 'childUnitFlag---', this.currnetUnitFlag);
 
            var jsonParams = {
        storeId: localStorage.getItem('cbStoreId'),
        userId: localStorage.getItem('cbUserId'),
        token: localStorage.getItem('cbToken'),
        itemId: this.currentItemId

      };
      console.log('j111son-=-',jsonParams);

      this.$http
          .post(
            this.globalRequestUrl.SELECTGOODSBYIDAPI,
            this.qs.stringify(jsonParams)
          )
          .then((res) => {
            if (res.data.status == 200) {
              console.log("SELECTGOODSBYIDAPI---", res);
              this.stockUnitFlag = parseInt(res.data.data.unitFlag);
              console.log("res.data.data.skuList---", res.data.data.skuList);
                this.stockSkuList = res.data.data.skuList.length?res.data.data.skuList:[{ id: 0 }];
                this.stockSkuList.forEach((item, index) => {

                    item.tempSelect = index == 0 ? true : false;

                });
                console.log('zzzzzzskulist---', this.stockSkuList);
               
              
                this.stockNum = this.stockUnitFlag == 1 ? this.stockSkuList[0].num : this.stockSkuList[0].weight;
                this.oldStock = this.stockNum;// 记录之前库存是否是0，用于及时更新库存数据
                console.log('stockUnitFlag---', this.stockUnitFlag);
                this.stockCurrentItem = this.stockSkuList[0];
                console.log('当前===stockCurrentItem', this.stockCurrentItem);
            
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(function (err) {
            // this.$message.error("服务器错误，请检查！");
          });




        },
        stock_click_oneId(index2, currentItem) { // 当前属性行
            console.log('-1111currentItem---', currentItem);

            this.stockSkuList.forEach((item, index) => {

                item.tempSelect = index == index2 ? true : false;

            });
            this.stockSkuList = [...this.stockSkuList];

            this.stockNum = this.stockUnitFlag == 1 ? currentItem.num : currentItem.weight;
            this.stockCurrentItem = this.stockSkuList[index2];
            console.log('stock最新---', this.stockCurrentAttributeList);
        },
        skuOpeFunc() {
            // if (!this.inputStockNum) {
            //     var text = '';
            //     text = this.stockUnitFlag == 1 ? '请输入数量' : '请输入重量';
            //     return this.$message.warning(text);
            // }
            // var jsonParams = {

            //     storeId: this.cbStoreId,
            //     itemId: this.stockCurrentItem.itemId,
            //     title: this.stockCurrentItem.title,
            //     price: this.stockCurrentItem.price,

            //     num: this.stockUnitFlag == 1 ? this.inputStockNum : 0,
            //     weight: this.stockUnitFlag == 2 ? this.inputStockNum : 0,
            //     id: this.stockCurrentItem.id,
            //     image: "",

            // };


            // console.log("参数为", jsonParams);

            // updateItemSkuAPI(jsonParams)
            //     .then((res) => {
            //         console.log("拿到的id为", res);
            //         setTimeout(this.toastHide, 0);
            //         if (res.status != 200) {
            //             this.$message.warning(res.msg);
            //             // this.frequentlyToastShow = false;
            //             return;
            //         }


            //         this.$message.success('修改成功');
            //         this.hideGuide();
            //         // this.stockShow = false;
            //         this.stockCurrentItem = {};
            //         this.inputStockNum = '';


            //     })
            //     .catch((error) => {
            //         console.log("哈哈哈哈哈哈eeeeeeeeeeee", error);
            //         this.frequentlyToastShow = false;
            //         setTimeout(this.toastHide, 0);
            //     });


                var jsonParams = {
        storeId:localStorage.getItem('cbStoreId'),
        userId:localStorage.getItem('cbUserId'),
        token: localStorage.getItem('cbToken'),
        itemId: this.stockCurrentItem.itemId,
                title: this.stockCurrentItem.title,
                price: this.stockCurrentItem.price,

                num: this.stockUnitFlag == 1 ? (this.inputStockNum? this.inputStockNum: 0):0,
                weight: this.stockUnitFlag == 2 ? (this.inputStockNum? this.inputStockNum: 0):0,
                id: this.stockCurrentItem.id,
                image: "",

      };
      console.log('json-=-',jsonParams);

      this.$http
          .post(
            this.globalRequestUrl.updateItemSkuAPI,
            this.qs.stringify(jsonParams)
          )
          .then((res) => {
            if (res.data.status == 200) {
              console.log("updateItemSkuAPI---", res);
 
                    setTimeout(this.toastHide, 0);


                    this.$message.success('修改成功');
                    this.stockNum = this.inputStockNum?this.inputStockNum:0;
                    this.hideGuide();
                    // this.stockShow = false;
                    this.stockCurrentItem = {};
                    this.inputStockNum = '';

            
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch(function (err) {
            // this.$message.error("服务器错误，请检查！");
          });




        },



        limitNumber(value) {
            if (typeof value === "string") {
                return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
            } else if (typeof value === "number") {
                return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
            } else {
                return 0;
            }
        },


    },
    computed: {}
};
</script>
    
<style scoped lang="less">
.stock_toast_box {
    /* position: absolute; */
    position: fixed;
    z-index: 3;
    /* width: 500px; */
    /* height: 100%; */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.add_toast_box {
    background-color: white;
    width: 400px;
    /* height: 250px; */
    // min-height: 250px;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}

.add_top {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    background-color: #ED6A1F;
    border-bottom: 1px solid #f2f2f2;
}

.add_content_box {
    margin: 12px;
}

.tan_kuangtwo {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.num_box {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
}

.tag_tag_box {
    display: flex;
    flex-wrap: wrap;
}

.tag_nei {
    padding: 10px 30px;
    background: #F0F0F0;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 10px;
    display: inline-block; // margin-right: 20px;
    margin-right: 8px;
}

.tanactive {
    // background: #FFF1F0;
    // color: #FF554C;
    // box-sizing: border-box;
    // border: 1px solid #FF554C;
    color: #ED6A1F;
    background: rgb(253, 240, 232);
    border: 1px solid #ED6A1F;
    justify-content: center;
    display: flex;
    align-items: center; // margin-right: 20px;
    border-radius: 4px; // width:80px;
    height: 30px;
    padding: 0 20px;
    position: relative;
}

.tanunactive {
    // color: #000000;
    // box-sizing: border-box;
    // border: 1px solid transparent;
    color: #808080;
    background: #F2F2F2;
    border: 1px solid #F2F2F2;
    justify-content: center;
    display: flex;
    align-items: center; // margin-right: 20px;
    border-radius: 4px; // width:80px;
    height: 30px;
    padding: 0 20px;
    position: relative;
}

.num_stock_box {
    display: flex;
    flex-direction: column;
}

.add_choice_bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/
    user-select: none;
    margin-bottom: 12px;
}

.choice_btn {
    background: #ED6A1F;
    color: white;
    width: 170px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>
    